<template>
  <div :style="outModuleCss">
    <div :style="moduleBgCss" class="module-bg"></div>
    <div class="nearby-shop">
      <div
        :class="['goods-header', !propsData.params.showModuleName ? 'add-padding' : '']"
        v-if="propsData.params.showModuleName"
      >
        <div class="module-header" v-if="propsData.params.showModuleName">
          <p class="module-name" :style="propsData.params.moduleNameCss">
            {{ propsData.params.showModuleName ? propsData.params.moduleName : '' }}
          </p>
          <p class="more" v-if="propsData.params.showMoreText" :style="this.propsData.params.moduleMoreCss">
            <span>{{ propsData.params.moreText || '更多' }}</span>
            <i class="iconfont icon-weibiaoti-13"></i>
          </p>
        </div>
        <div class="item-hover">
          <div class="edit-box" @click.stop="toModuleHeaderControl">
            <i class="iconfont icon-mokuai-bianji"></i>
          </div>
        </div>
        <div :style="heaerBgCss" v-if="propsData.params.showModuleName" class="module-bg"></div>
      </div>
      <div class="classBox" :style="classCss">
        <div :style="classBgCss" class="module-bg"></div>
        <shopClassify
          :propsData="propsData"
          @changeTab="changeTab"
          @handleClassifyTabItem="handleClassifyTabItem"
          :active="active"
        ></shopClassify>
        <div class="item-hover">
          <div class="edit-box" @click.stop="toEditShopClassify">
            <i class="iconfont icon-mokuai-bianji"></i>
          </div>
        </div>
      </div>
      <div class="shopList" :style="shopListCss">
        <div :style="shopListBgCss" class="module-bg"></div>
        <div class="section-list" v-show="propsData.params.styleType == 1">
          <div class="section-body" v-for="(item, index) in shopList" :key="index">
            <div class="shop-section">
              <div class="shop-info">
                <div class="shop-img">
                  <img src="@/assets/images/diy/default_img.png" alt="" v-if="!item.logo" />
                  <img :src="item.logo" alt="" v-else />
                </div>
                <div class="info-box">
                  <p class="shop-name">{{ item.name }}</p>
                  <div class="shop-stars">
                    <div class="star-box">
                      <span>4.7</span>
                      <span class="iconfont icon-dianpupingfen"></span>
                      <span class="iconfont icon-dianpupingfen"></span>
                      <span class="iconfont icon-dianpupingfen"></span>
                      <span class="iconfont icon-dianpupingfen"></span>
                      <span class="iconfont icon-dianpupingfen"></span>
                    </div>
                    <span class="distance">1.3km</span>
                  </div>
                  <div class="shop-address">
                    <span>汉堡 泉舜广场</span>
                    <span>近期买单1.8万+</span>
                  </div>
                  <div class="shop-sale">
                    <span>近30天135人复购</span>
                    <span>近30天135人复购</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="goods-section-box" v-show="propsData.params.showGoods">
              <div class="goods-section">
                <div class="goods-item" v-for="(good, goodIndex) in item.goodsInfo" :key="goodIndex">
                  <div class="goods-pic">
                    <img src="@/assets/images/diy/default_img.png" alt="" v-if="!good.cover_pic" />
                    <img :src="good.cover_pic" alt="" v-else />
                  </div>
                  <p class="goods-name">{{ good.name }}</p>
                  <p class="goods-price"><span>¥</span>{{ good.price }}</p>
                  <p class="goods-origin-price">¥{{ good.original_price }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="list-section" v-show="propsData.params.styleType == 2">
          <div
            class="list-item"
            v-for="(item, index) in shopList"
            :key="index"
            :style="{ marginRight: propsData.params.shopSpace + 'px' }"
          >
            <div class="list-top"></div>
            <div class="list-center">
              <img src="@/assets/images/diy/default_img.png" alt="" v-if="!item.logo" />
              <img :src="item.logo" alt="" v-else />
            </div>
            <div class="list-down" :style="{ backgroundColor: propsData.params.shopBgColor }">
              <p :style="propsData.params.shopNameCss">{{ item.name }}</p>
            </div>
          </div>
        </div>
        <div class="item-hover">
          <div class="edit-box" @click.stop="toShopListControl">
            <i class="iconfont icon-mokuai-bianji"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixinsModuleCss } from '@/components/DiyNew/diy/mixins/index.js'
import moduleHeader from '@/components/DiyNew/diy/baseControl/moduleHeader/index.vue'
import shopClassify from './components/shopClassify.vue'
import default_img from '@/assets/images/diy/default_img.png'

export default {
  name: 'nearShop',
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  components: {
    moduleHeader,
    shopClassify,
  },
  mixins: [mixinsModuleCss],
  data() {
    return {
      active: 0,
      tabGoods: [],
      mockData: [
        {
          logo: default_img,
          id: 0,
          name: '赤店商城',
          goodsInfo: [
            {
              cover_pic:
                'http://tianxin100we10.cyyvip.com/web/uploads/image/store_1/3f3bbfefe7814b83801f6b45932bfac4fac682d1.png',
              id: '12',
              name: '手机瑞士正品手表男全自动机械表商务休闲男表超薄防水精钢男士手表',
              original_price: '1.00',
              price: '1950.03',
            },
            {
              cover_pic:
                'https://chidian.cyyvip.com/web/uploads/images/store_1/2021-10-12/771e223b528f45564b3d57dad0ff41c6a900b8c2.jpeg',
              id: '205',
              name: 'SK-II男士神仙水75ml精华液护肤品化妆品 均匀肤色skiisk2',
              original_price: '590.00',
              price: '590.00',
            },
          ],
        },
      ],
    }
  },
  watch: {},
  computed: {
    classCss() {
      let style = JSON.parse(JSON.stringify(this.propsData.params?.classBgCss))
      if (style.margin) style.margin = `${style.margin}px 0`
      if (style.borderRadius) style['borderRadius'] = `${style.borderRadius}px`
      let obj = {
        margin: style.margin,
        borderRadius: style.borderRadius,
        position: 'relative',
        overflow: 'hidden',
      }
      return obj
    },
    classBgCss() {
      if (!this.propsData.params?.classBgCss) return {}
      let style = JSON.parse(JSON.stringify(this.propsData.params.classBgCss))
      // if (style.borderRadius) style["borderRadius"] = `${style.borderRadius}px`;
      if (!style.useBackground) {
        return {
          background: 'inherit',
        }
      }
      let hSpace = style.padding
      if (hSpace) {
        style['width'] = `calc(100% - ${hSpace * 2}px)`
        style['left'] = hSpace + 'px'
      }
      return style
    },
    heaerBgCss() {
      if (!this.propsData.params.headerBg) return ''
      let style = JSON.parse(JSON.stringify(this.propsData.params.headerBg))
      if (!style.useBackground) {
        return {
          background: 'inherit',
        }
      }
      return style
    },
    shopListCss() {
      let style = JSON.parse(JSON.stringify(this.propsData.params?.shopListBgCss))
      if (style.margin) style.margin = `${style.margin}px 0`
      if (style.padding) style.padding = `0 ${style.margin}px`
      if (style.borderRadius) style['borderRadius'] = `${style.borderRadius}px`
      let obj = {
        margin: style.margin,
        padding: style.padding,
        borderRadius: style.borderRadius,
        position: 'relative',
        overflow: 'hidden',
      }
      return obj
    },
    shopListBgCss() {
      if (!this.propsData.params?.shopListBgCss) return {}
      let style = JSON.parse(JSON.stringify(this.propsData.params.shopListBgCss))
      // if (style.borderRadius) style["borderRadius"] = `${style.borderRadius}px`;
      if (!style.useBackground) {
        return {
          background: 'inherit',
        }
      }
      let hSpace = style.padding
      if (hSpace) {
        style['width'] = `calc(100% - ${hSpace * 2}px)`
        style['left'] = hSpace + 'px'
      }
      return style
    },
    shopList() {
      let currentShop = this.propsData.params.classifyList.find((item, index) => {
        return index == this.active
      })
      if (currentShop) {
        if (!currentShop.data || !currentShop.data.length) {
          return this.mockData
        } else {
          return currentShop.data
        }
      }
    },
  },
  methods: {
    toModuleHeaderControl() {
      let data = Object.assign({}, this.propsData)
      data.controlComName = 'editProductModuleHeader'
      this.$emit('chooseMoudle', data)
    },
    // 点击编辑模块
    toEditShopClassify() {
      let data = Object.assign({}, this.propsData)
      data.controlComName = 'shopClassifyControl'
      this.$emit('chooseMoudle', data)
    },
    // 点击切换tab
    changeTab(e) {
      let { item, index } = { ...e }
      this.tabGoods = item.data || []
      this.active = index
      this.$eventHub.$emit('shopClassifyTabChange', { index, item })
    },
    // 点击编辑当前状态
    handleClassifyTabItem(e) {
      this.$emit('chooseMoudle', e)
    },
    // 编辑商户列表模块
    toShopListControl() {
      let data = Object.assign({}, this.propsData)
      data.controlComName = 'shopListControl'
      this.$emit('chooseMoudle', data)
    },
  },
}
</script>

<style lang="scss" scoped>
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
}
.nearby-shop {
  width: 100%;
  .goods-header {
    width: 100%;
    padding: 0px 12px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .module-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .module-name {
        font-size: 16px;
        font-weight: 600;
        color: #262626;
        margin-bottom: 0;
      }
      .more {
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: 400;
        color: #888888;
        margin-bottom: 0;
        line-height: 1;
        .iconfont {
          font-size: 12px;
          margin-left: 2px;
          transform: scale(0.8);
        }
      }
    }
    .item-hover {
      width: 100%;
      height: 100%;
      border: 1px solid #1890fc;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      .edit-box {
        width: 20px;
        height: 20px;
        background: #1890fc;
        border-radius: 0px 0px 0px 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        .iconfont {
          font-size: 18px;
          color: #ffffff;
        }
      }
    }
  }
  .goods-header:hover > .item-hover {
    display: block;
  }
  .classBox {
    position: relative;
    padding: 2px 0;
  }
  .item-hover {
    width: 100%;
    height: 100%;
    border: 1px solid #1890fc;
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    .edit-box {
      width: 20px;
      height: 20px;
      background: #1890fc;
      border-radius: 0px 0px 0px 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 10;
      .iconfont {
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
  .classBox:hover > .item-hover {
    display: block;
  }
  .add-padding {
    padding-top: 12px;
    height: inherit;
  }
  .shopList {
    .section-body {
      width: 100%;
      border-radius: 5px;
      padding: 12px 12px 0 12px;
      margin-bottom: 10px;
      .shop-section {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .shop-info {
          width: 100%;
          display: flex;
          align-items: center;
          .shop-img {
            width: 70px;
            min-width: 70px;
            height: 70px;
            background: #f2f2f2;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 11px;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .info-box {
            flex: auto;
            display: flex;
            flex-direction: column;
            .shop-name {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 16px;
              font-weight: 800;
              color: #000000;
              margin-bottom: 0;
            }
            .shop-stars {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .star-box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #f85809;
                span:nth-child(1) {
                  font-size: 15px;
                  font-weight: 600;
                  margin-right: 5px;
                }
                .iconfont {
                  font-size: 12px;
                }
              }
              .distance {
                font-size: 12px;
                color: #8c8c8c;
              }
            }
            .shop-address {
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 12px;
              span:nth-child(1) {
                color: #8c8c8c;
              }
              span:nth-child(2) {
                color: #f85809;
              }
            }
            .shop-sale {
              display: flex;
              align-items: center;
              span {
                font-size: 10px;
                padding: 2px 4px;
                border-radius: 4px;
                font-weight: 600;
              }
              span:nth-child(1) {
                background-color: #feefe0;
                color: #f95d09;
              }
              span:nth-child(2) {
                border: 1px solid #f95d09;
                color: #f95d09;
              }
            }
          }
        }
      }
      .goods-section {
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        display: flex;
        align-items: center;
        transition: all 0.2s;
        .goods-item {
          width: 90px;
          margin-right: 10px;
          .goods-pic {
            width: 90px;
            height: 90px;
            border-radius: 5px 5px 0px 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          p {
            margin-bottom: 0;
          }
          .goods-name {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            font-weight: bold;
            color: #000000;
            padding: 7px 8px 6px 7px;
            line-height: 1;
          }
          .goods-price {
            font-size: 14px;
            font-weight: bold;
            color: #fa2c1b;
            padding: 0 8px 6px 7px;
            line-height: 1;
            span {
              font-size: 10px;
            }
          }
          .goods-origin-price {
            padding: 0 8px 6px 7px;
            font-size: 10px;
            color: #9b9b9b;
            line-height: 1;
            text-decoration: line-through;
          }
        }
        .goods-item:last-child {
          margin-right: 0;
        }
      }
      .goods-section::-webkit-scrollbar {
        width: 0;
      }
    }

    .list-section {
      width: 100%;
      border-radius: 5px;
      padding: 12px;
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex;
      align-items: center;
      .list-item {
        width: 94px;
        height: 150px;
        background: #f2f2f2;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        position: relative;
        .list-top {
          width: 94px;
          height: 75px;
          background: #e6e6e6;
          border-radius: 5px 5px 0px 0px;
        }
        .list-center {
          width: 42px;
          height: 42px;
          background: #ffffff;
          border-radius: 50%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 23px;
            height: 18px;
            display: block;
          }
        }
        .list-down {
          flex: 1;
          padding-top: 29px;
          border-radius: 0 0 5px 5px;
          p {
            max-width: 76px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 auto;
            text-align: center;
          }
        }
      }
      .list-item:last-child {
        margin-right: 0;
      }
    }
  }
  .shopList:hover > .item-hover {
    display: block;
  }
  .list-section::-webkit-scrollbar {
    width: 0;
  }
}

.goods-section-box{
  padding:10px 0 0 80px;
}
</style>
